import { Table, Message ,Pagination, Switch, MessageBox, Button, Form, Input, Icon, Tabs} from 'element-react'
import React, { Component } from 'react'


function Cron(params) {
  return (
    <div>
      <Tabs activeName="1" onTabClick={ (tab) => console.log(tab.props.name) }>
        <Tabs.Pane label="用户管理" name="1"><MaintianPage/></Tabs.Pane>
        <Tabs.Pane label="配置管理" name="2">配置管理</Tabs.Pane>
        <Tabs.Pane label="角色管理" name="3">角色管理</Tabs.Pane>
      <Tabs.Pane label="定时补偿任务" name="4">定时补偿任务</Tabs.Pane>
    </Tabs>
    </div>
  )
}



export default class MaintianPage extends Component {

  componentDidMount(){
    fetch("/device/devicejobinfo/list" , {

    }).then(data=>data.json())
    .then(result=>{

      this.setState({data:result.page.list , page :{
        total: result.page.totalPage,
        pageSize:  result.page.pageSize,
        currentPage: result.page.currPage,
      }})
    })
  }


  state={
    data:[],
    columns:[
      {
        type:"index",
        align:"center",
        fixed: 'left',
      },{
        label:"任务名称",
        prop:"jobname",
        align:"center"
      },{
        label:"任务规则",
        prop:"times",
        align:"center"
      },{
        label:"任务逻辑",
        prop:"tasksql",
        align:"center"
      },{
        label:"状态",
        prop:"state",
        align:"center",
        render:(row, column, index)=>{
          return (
            <Switch
            value={row.state}
            onColor="#13ce66"
            offColor="#ff4949"
            onValue={1} 
            offValue={0}
            onChange={(state)=>{
              const newdata = {...row} 
              newdata.state = 1 - state
              console.log(newdata)
              MessageBox.confirm("你确定停止/开启定时任务？" , "警告" ,{
                type: 'warning'
              }).then(()=>{
                fetch("/device/devicejobinfo/updateState",{
                  method:"POST",
                  headers:{
                    "Content-Type": "application/json",
                  },
                  body:JSON.stringify(newdata)
                }).then(data=>data.json())
                .then(result=>{
                    if(result.code===0) {
                      const {data} = this.state
                      data[index].state = 1-state  
                      this.setState({data}) 
                      Message({
                        message: '操作成功',
                        type: 'success'
                      });
                    }
                })
              })
            }}>
          </Switch>
          )
        }
      },{
        label:"操作",
        align:"center",
        fixed:"right",
        render:(row , column , index) =>{
          return (
            <span style={{display:"flex"}}>
              <Button type="primary" size="small" onClick={()=>{this.alterJob(index)}}>修改</Button>
              <Button type="danger" size="small" onClick={()=>{this.deleteJob(index)}}>删除</Button>
            </span>
          )
        }
      }
    ],
    page:{}
  }   

  alterJob =(index)=>{
    const job = {...this.state.data[index]}
    MessageBox.msgbox({
      title: '操作',
      message: (
        <Form>
          <Form.Item label='任务名称'>
            <Input placeholder={job.jobname}  onChange={(e)=>{job.jobname = e}}></Input>
          </Form.Item>

          <Form.Item label='触发规则'>
            <Input placeholder={job.times} onChange={(e)=>{job.times = e}} 
            append={<Button type="primary" icon="time"
            onClick={()=>{
              MessageBox.msgbox({
                title:"规则生成器",
                message:(
                  <Cron data={"d"}/>
                ),
                showCancelButton:true
              }).then(action=>{

              })


            }}
            ></Button>}></Input>
          </Form.Item>

          <Form.Item label='任务语句'>
            <Input placeholder={job.tasksql}  onChange={(e)=>{job.tasksql = e}}></Input>
          </Form.Item>
        </Form>
      ),
      showCancelButton: true
    }).then(action=>{
      if(action==="confirm") {
        fetch("/device/devicejobinfo/updateJob" , {
          method:"POST",
          headers:{
            "Content-Type": "application/json",
          },
          body:JSON.stringify(job)
        }).then(data=>data.json())
        .then(result=>{
          const {data} = this.state;
          data[index] = job ;
          this.setState({data})
          Message({
            type:result.msg,
            message:result.msg===0?"更改成功":"操作失败"
          })
        })
      }
    })
  }
  deleteJob = (index)=>{
    MessageBox.confirm("你确定停止/开启定时任务？" , "警告" ,{
      type: 'warning'
    }).then(()=>{
      fetch("/device/devicejobinfo/delete",{
        method:"POST",
        headers:{
          "Content-Type": "application/json",
        },
        body:JSON.stringify([this.state.data[index].id])
      }).then(data=>data.json())
      .then(result=>{
          if(result.code===0) {
            const {data} = this.state
            data.splice(index , 1)
            this.setState({data}) 
            Message({
              message: '操作成功',
              type: 'success'
            });
          }
      })
    })
  }

  render() {
    return (
      <div>
        <Table 
        data={this.state.data}
        columns={this.state.columns}/>
        <Pagination layout="prev, pager, next" 
             pageCount={this.state.page.total} 
             pageSize={this.state.page.pageSize}
             currentPage={this.state.page.currentPage}
             onCurrentChange={this.pagechange}/>
      </div>
    )
  }
}
